<template>
  <div>
      
    <Panel title="可退款订单" useBack>
      <div slot="ext">
        <el-button type="primary" @click="confirmRefund" style="margin: 0px 10px">确认发起退款</el-button>
        <!-- <el-button type="primary" @click="confirmRefund" style="margin: 0px 10px">手动退款</el-button> -->
      </div>
      <TableEncapsulation
        slot="body"
        :tableConfig="tableConfig"
        :tableData="tableData"
        :changeSelectRow="changeSelectRow"
      >
        <template slot="operation" slot-scope="operation" >
              <el-input v-model="refundList[operation.index]" placeholder=""></el-input>
        </template>
        <TablePager
          slot="pager"
          v-if="pager.use"
          :size="pager.size"
          :pageChange="pageChange"
          :show-total="pager.showTotal"
          :total="pager.total"
          :current="pager.current"
        >
          <span class="demonstration">GO></span>
        </TablePager>
      </TableEncapsulation>
    </Panel>

  </div>
</template>

<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import SearchInput from "@/components/SearchInput";
import TablePager from "@/components/Pager";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
import { objectFilter } from "@/tools/array";
import { dateFormat } from "@/tools/time";

export default {
  name:'userRefund_',
  components: {
    Panel,
    TableEncapsulation,
    SearchInput,
    TablePager,
    ModalPanel,
    ModifyForm
  },
  data() {
    return {
      
      appointmentTime: null,
      keywords: '',
      topUpEditColumn: [
        {
            label: "充值金额",
            type: "text",
            prop: "price",
            align: "center"
          },
          {
            label: "已退款金额",
            type: "text",
            prop: "refunded",
            align: "center"
          },
        {
          name: "金额",
          prop: "amount",
          type: "number",
          width: 24,
          required: true
        }
      ],
      editOrder: [],
      operation: true,
      account: "",
      accountStatus: "",
      multipleSelection: [],
      nickName: "",
      refundList:[],
      pager: {
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      tableData: [],
      page:1,
      uid: '',
      stid: '',
      oid: '',
    };
  },
  computed: {
    tableConfig() {
      return {
        selection: true,
        columnConfig: [
         {
            label: "充值金额",
            type: "text",
            prop: "price",
            align: "center"
          },
          {
            label: "已退款金额",
            type: "text",
            prop: "refunded",
            align: "center"
          },
         {
            label: "订单号",
            type: "text",
            prop: "oid",
            align: "center"
          },
          {
            label: "支付时间",
            type: "text",
            prop: "payTime",
            align: "center"
          },
          this.operation && {
            type: "operation",
            align: "center",
            label: "退款金额"
          }
        ].filter(Boolean)
      };
    }
  },
  methods: {
    nav(rowData){
      this.$router.push({
        path: '/user-order',
        query: {
          userId:rowData.id,
          userName: rowData.nickName
        }
      })
    },
     changeSelectRow(val){
      let editOrder= {}, price = 0, arrays = []
      for (let  i=0; i< val.length; i++){
        editOrder.oid = val[i].oid 
        price = val[i].price - val[i].refunded
        price = price < 0 ? 0 : price
        editOrder.price = price
      }
      arrays.push(editOrder)
       this.editOrder = arrays
    },
     changeSearch(key, val) {
      this[key] = val;
      this.pager.current = 1;
    },
    balance(rowData) {
      this.$router.push({
        path: "/user/balance",
        query: {
          userId: rowData.id
        }
      })
    },
    changeKeuWord(val){
      this.keywords = val
      this.pager.current=1
    },
    pageChange(val) {
      this.pager.current = val
      this.queryData()
    },
    async confirmRefund(){
      let url, msg
      url = '/wx/refund/manual/refund'
      msg = '成功'
       if(this.refundList.length <= 0){
        this.$message.error('至少输入一条订单退款金额') 
        return false
      }
      let tag = {}, subData = []
      let this_ = this
      this.refundList.map((item, index) => {
        if(item >0 && item){
          tag ={price: item, oid: this_.tableData[index].oid} 
          subData.push(tag)
        }
      })
      let res = await request({
        url: url,
        method: 'POST',
        data: { list: subData }
      })
      if (res.code !==0) return
      this.$message.success(res.msg)
      this.visible = false
      this.queryData()
    },
    async queryData(){
      let uid = this.uid
      let page = this.pager.current
      let search = objectFilter({ page, uid})
      let res = await request({
        url: "/charge/wx/available/refund",
        method: "POST",
        data: search
      });
      this.tableData = res.page.list
      // this.$set(this.pager,'total',res.total>>>0)
    },
  }, 
  created() {
    this.uid = this.$route.query.id
    this.queryData()
  }
};
</script>

<style lang='scss' module>
.modifyStyle{

}
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  // flex-direction: row-reverse;
  
  :global{
    .el-input{
      width: 250px;
    }
    .el-select{
      .el-input{
        width: 90px;
      }
    }
    .el-input__icon{
      line-height: 32px;
    }
  }
}

.topSelect{
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}

.selectBox {
  :global {
    label {
      font-size: 14px;
      color: #666666;
    }
    .el-input__inner {
      height: 32px;
    }
    .el-input__suffix {
      line-height: 32px;
    }
    .el-date-editor--datetime{
      width: 200px;
    }
  }
}
</style>